import React, {useEffect,useState}from 'react'
import { SideBar } from 'antd-mobile'
import { list } from '../../apis/classify'
import Pubsub from "pubsub-js"
export default function List() {
    let [tabs,setTabs] = React.useState([]);
    const [activeKey, setActiveKey] = React.useState();
    useEffect(()=>{
        list().then((ok)=>{
            setTabs(ok.list);
            setActiveKey(ok.list[0].id)
            list_id(ok.list[0].id)
        })
    },[])
    // console.log(activeKey);

    let list_id=(id)=>{
        // console.log(activeKey, id);
        setActiveKey(id)
        Pubsub.publish("list_id",id)
    }

    // console.log(tabs);
  return (
    <SideBar style={{ '--background-color': '#f7f7f7' }} 
        // activeKey={activeKey} 
        onChange={list_id}
        defaultActiveKey
        className='left'
    >
        {
            tabs.map((item) => (
                <SideBar.Item key={item.id} title={item.name}  />
            ))
        }
    </SideBar>
  )
}
